<template>
	<view class="">
		<list-item showRight showBorderBottom leftName="设备">
			<view class="_select" @click="$emit('click')" slot="right">
				<text>{{ deviceInfoSelected.label || '请选择' }}</text>
				<u-icon name="arrow-right" color="#878787" size="28"></u-icon>
			</view>
		</list-item>
		<list-item showBorderBottom leftName="信息">
			<view class="_info" slot="center">
				<text>{{ deviceInfoSelected.ip }}</text>
				<text>{{ deviceInfoSelected.id }}</text>
				<text>{{ deviceInfoSelected.carCode }}</text>
			</view>
		</list-item>
		<list-item showBorderBottom flexStart leftName="描述">
			<view class="_photo" slot="center">
				<u-input v-model="inputValue" :type="type" :border="border" :height="height" :auto-height="autoHeight" :placeholder="inputPlaceholder" />
			</view>
		</list-item>
		<view class="positon_bottom"><u-button type="primary" shape="circle" style="width: 600rpx;" @click="$emit('report',inputValue)">提交</u-button></view>
	</view>
</template>

<script>
	import listItem from '../../reportRepair/components/list-item.vue'
	export default{
		components:{
			listItem
		},
		props:{
			deviceInfoSelected:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				inputValue: '',
				inputPlaceholder: '请详细描述设备故障问题，以便维修人员快速处理',
				type: 'textarea',
				border: true,
				height: 260,
				autoHeight: false,
			}
		},
		methods:{
			report(){
				}
			
		}
	}
</script>

<style scoped lang="scss">
._select {
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	text {
		color: #878787;
		margin-right: 20rpx;
	}
}
._info {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 0 30rpx;
	text {
		font-size: 28rpx;
		color: #878787;
	}
}	
._photo {
	padding-left: 80rpx;
	margin: 20rpx;
	._photoIcon {
		width: 160rpx;
		height: 160rpx;
		background-color: #f2f2f2;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.positon_bottom {
	position: fixed;
	bottom: env(safe-area-inset-bottom);
	left: 0;
	right: 0;
	height: 140rpx;
	// background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
